/**
 * @author of2470
 *@date 2017/4/25
 *@description
 */
import * as React from "react";
import { browserHistory } from "react-router";
import { Modal } from "antd";
import "../style/modal-template.less";
import { getSystemCode } from "../../common/const-value";

export default class ModalTemplate extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    };
  }

  showModal = () => {
    this.setState({
      visible: true
    });
  };

  handleOk = () => {
    this.setState({ visible: false }, () => {
      let systemCode = "";
      (location.hash || "")
        .replace(
          /(#\/main|#\/acct|#\/d2c|#\/d2p|#\/oms|#\/mc|#\/member)/g,
          match => {
            systemCode = match.replace("#/", "");
            return match;
          }
        );
      if (systemCode) {
        location.href = `#/${systemCode}/x-site/page-manage`;
      } else {
        location.href = `#/x-site/page-manage`;
      }
    });
  };

  handleCancel = () => {
    this.setState({
      visible: false
    });
  };

  _content = () => {
    let _ul = [];
    const _list = [
      {
        title: "选择需要编辑的站点",
        image:
          "http://oss-hz.qianmi.com/x-site/public/x-site-ui-winter/images/landing/landing-1.png"
      },
      {
        title: "选择需要的模板",
        image:
          "http://oss-hz.qianmi.com/x-site/public/x-site-ui-winter/images/landing/landing-2.png"
      },
      {
        title: "编辑页面数据",
        image:
          "http://oss-hz.qianmi.com/x-site/public/x-site-ui-winter/images/landing/landing-3.png"
      },
      {
        title: "发布页面上线",
        image:
          "http://oss-hz.qianmi.com/x-site/public/x-site-ui-winter/images/landing/landing-4.png"
      }
    ];
    _list.map(item => {
      if (item !== null) {
        _ul.push(
          <li className="_list" key={item.title}>
            <p className="processTitle">
              {item.title}
            </p>
            <img className="_image" src={item.image} alt="" />
          </li>
        );
      }
    });
    return (
      <ul>
        {_ul}
      </ul>
    );
  };

  render() {
    return (
      <div>
        <Modal
          visible={this.state.visible}
          width="1100px"
          okText="开始建站"
          cancelText="取消"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p className="modal-template-title">欢迎使用魔方建站，阅读说明，完善资料，帮助您快速建站。</p>
          <p className="process">
            <b className="round">1</b>选择站点
            <span className="_span">———————————</span>
            <b className="round">2</b>选择模板
            <span className="_span">———————————</span>
            <b className="round">3</b>编辑页面
            <span className="_span">———————————</span>
            <b className="round">4</b>发布上线
          </p>
          <div>
            {this._content()}
          </div>
        </Modal>
      </div>
    );
  }
}
